<template>
  <div class="unusual-warn-page pd16" v-loading="pageLoading">
    <el-row :gutter="16" class="flex-block">
      <el-col :span="6">
        <el-card class="box-card sp-card">
          <!-- <el-tree
            ref="treeRef"
            class="nr-tree"
            :data="treeData"
            :expand-on-click-node="false"
            show-checkbox
            default-expand-all
            node-key="id"
            highlight-current
            :props="defaultProps">
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <el-tag type="danger" size="small" effect="dark" style="margin-left: 10px;">99</el-tag>
              </span>
            </template>
          </el-tree> -->
          <el-tree
            ref="treeRef"
            class="nr-tree"
            :data="treeData"
            :expand-on-click-node="false"
            show-checkbox
            default-expand-all
            node-key="id"
            highlight-current
            :props="defaultProps">
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card sp-card">
          <div class="search-block">
            <el-form ref="searchParamsRef" :model="searchParams" @submit.prevent="search">
              <el-row :gutter="16">
                <el-col :span="8">
                  <el-form-item label="时间范围：" prop="range">
                    <el-date-picker
                      v-model="searchParams.range"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <div ref="tableBlockRef" class="data-block table-block">
            <el-table :data="tableData" :max-height="tableHeight" class="nr-table">
              <el-table-column label="告警类型" prop="name"></el-table-column>
              <el-table-column label="日期" prop="name"></el-table-column>
              <el-table-column label="设备" prop="id"></el-table-column>
              <el-table-column label="房间" prop="rtsp"></el-table-column>
              <el-table-column label="用户" prop="rtsp"></el-table-column>
              <el-table-column label="时长" prop="rtsp"></el-table-column>
              <el-table-column label="开始" prop="rtsp"></el-table-column>
              <el-table-column label="结束" prop="rtsp"></el-table-column>
              <el-table-column label="平均心率" prop="rtsp"></el-table-column>
              <el-table-column label="最大心率" prop="rtsp"></el-table-column>
              <el-table-column label="平均呼吸" prop="rtsp"></el-table-column>
              <el-table-column label="最大呼吸" prop="rtsp"></el-table-column>
              <el-table-column label="告警通知" prop="rtsp"></el-table-column>
              <el-table-column label="操作" prop="rtsp" fixed="right">
                <template #default="scope">
                  <el-link class="table-btn" type="primary" :underline="false" @click="handleDetail(scope.row)">详情</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="page-right-block">
            <el-pagination
              class="nr-page"
              v-model:current-page="searchParams.currentPage"
              v-model:page-size="searchParams.pageSize"
              :page-sizes="[10, 20, 30, 40]"
              background
              layout="total, prev, pager, next, sizes, jumper"
              :total="searchParams.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <unusual-detail-dialog
      :dialogVisible="detailDialogVis"
      :formData="warnData.data"
      @update:dialogVisible="(value: boolean) => detailDialogVis = value">
    </unusual-detail-dialog>
  </div>
</template>

<script setup lang="ts" name="UnusualWarn">
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import UnusualDetailDialog from './unusual-detail-dialog.vue'
import { projectList } from '@/api/project-manage'
import { deviceTree } from '@/api/device-manage'

const pageLoading = ref(false)
const defaultProps = {
  // children: 'projectTree',
  label: 'name',
}
const treeData = ref<any>([])
const searchParamsRef = ref<FormInstance>()
const searchParams = reactive({
  range: [],
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const tableData = ref<any>([
  { id: 1, name: '1', account: '1' }
])
const tableBlockRef = ref<any>(null)
const tableHeight = ref(200)
const detailDialogVis = ref(false)
const warnData = ref({
  data: {}
})

onMounted(() => {
  resizeTable()
  window.addEventListener('resize', resizeTable, false)
  // getProjectData()
  getDeviceTreeData()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeTable, false)
})

// 窗口改变table高度
const resizeTable = () => {
  tableHeight.value = tableBlockRef.value.offsetHeight
}

// 递归过滤设备树
const filterDeviceTree = (node: any) => {
  if (!node) return null
  const newNode = {
    name: !node.deviceId ? node.projectName : node.deviceName,
    id: !node.deviceId ? node.pid : node.deviceId,
    type: !node.deviceId ? 'p' : 'd',
    children: []
  }
  if (node.projectTree && node.deviceList) {
    newNode.children = <any>[...node.projectTree.map(filterDeviceTree), ...node.deviceList.map(filterDeviceTree)]
  } else {
    if (node.projectTree) newNode.children = node.projectTree.map(filterDeviceTree)
    if (node.deviceList) newNode.children = node.deviceList.map(filterDeviceTree)
  }
  return newNode
}

// 查询
const search = () => {
  searchParams.currentPage = 1
}

// 重置
const reset = () => {
  searchParamsRef.value?.resetFields()
}

// 分页跳转
const handleCurrentChange = (val: number) => {

}
const handleSizeChange = (val: number) => {

}

// 详情
const handleDetail = (row: any) => {
  detailDialogVis.value = true
  warnData.value.data = Object.assign({}, row)
}

// 获取项目树表格数据
const getProjectData = async () => {
  pageLoading.value = true
  await projectList().then((res: any) => {
    if (res.code === 0) {
      treeData.value = [res.data]
    } else {
      ElMessage.error(`${res.msg}`)
    }
  }).catch(err => {
    console.log(err)
  })
  pageLoading.value = false
}

// 获取设备树数据
const getDeviceTreeData = async () => {
  pageLoading.value = true
  await deviceTree().then((res: any) => {
    if (res.code === 0) {
      treeData.value = [filterDeviceTree(res.data)]
    } else {
      ElMessage.error(`${res.msg}`)
    }
  }).catch(err => {
    console.log(err)
  })
  pageLoading.value = false
}
</script>

<style lang="stylus" scoped>
@import '../../style/base.styl'

.unusual-warn-page
  height 100%
  .table-block
    top 70px 
</style>
